<template>
	<view class="content">
		<!-- 用户详细信息列表 -->
		<view class="user-details" v-if="userinfo">
			<view class="detail-item" @click="upload" v-if="userinfo">
				<text class="detail-key">用户头像:</text>
				<view class="avatar">
					<image v-if="userinfo.img" :src="userinfo.img" mode="aspectFill" class="avatar-image"></image>
					<image v-else src="../../static/icon/touxiang.png" mode="aspectFill" class="avatar-image"></image>
				</view>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item" @click="login" v-else>
				<text class="detail-key">用户头像:</text>
				<view class="avatar">
					<image src="../../static/icon/touxiang.png" mode="aspectFill" class="avatar-image"></image>
				</view>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item" @click="showEditUsername">
				<text class="detail-key">用户名:</text>
				<text class="detail-value">{{ userinfo.username }}</text>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item" @click="showEditPhone">
				<text class="detail-key">手机号:</text>
				<text class="detail-value">{{ userinfo.phone }}</text>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item" @click="showEditEmail">
				<text class="detail-key">用户邮箱:</text>
				<text class="detail-value">{{ userinfo.email }}</text>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item" @click="Vip">
				<text class="detail-key">会员等级:</text>
				<text class="detail-value">{{ userinfo.name }}</text>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
			<view class="detail-item">
				<text class="detail-key">注册时间:</text>
				<text class="detail-value">{{ formatDateTime(userinfo.create_time) }}</text>
				<image src="/static/icon/xiangyou1.png" mode="widthFix" class="arrow-icon"></image>
			</view>
		</view>
		<view v-else>
			<view class="loading">加载中...</view>
		</view>

		<!-- 编辑用户名弹窗 -->
		<uni-popup ref="editUsernamePopup" type="bottom">
			<view class="popup-content">
				<view class="title-x">
					<text class="title">修改用户名</text>
					<image src="/static/icon/cuowuguanbiquxiao.png" mode="widthFix" @click="hideEditUsername"></image>
				</view>
				<input type="text" v-model="newUsername" placeholder="输入新用户名" />
				<view class="button-group">
					<button @click="updateUsername">保存</button>
				</view>
			</view>
		</uni-popup>

		<!-- 编辑手机号弹窗 -->
		<uni-popup ref="editPhonePopup" type="bottom">
			<view class="popup-content">
				<view class="title-x">
					<text class="title">修改手机号码</text>
					<image src="/static/icon/cuowuguanbiquxiao.png" mode="widthFix" @click="hideEditPhone"></image>
				</view>
				<input type="text" :value="userinfo.email" disabled placeholder="输入旧邮箱" />
				<view class="input-group verification-code-group">
					<input type="text" v-model="code" placeholder="输入验证码" />
					<button @click="sendCode">发送验证码</button>
				</view>
				<input type="text" v-model="newPhone" placeholder="输入新手机号" />
				
				<view class="button-group">
					<button @click="updatePhone">保存</button>
				</view>
			</view>
		</uni-popup>

		<!-- 编辑邮箱弹窗 -->
		<uni-popup ref="editEmailPopup" type="bottom">
			<view class="popup-content">
				<view class="title-x">
					<text class="title">修改邮箱</text>
					<image src="/static/icon/cuowuguanbiquxiao.png" mode="widthFix" @click="hideEditEmail"></image>
				</view>
				<input type="text" :value="userinfo.email" disabled placeholder="输入旧邮箱" />
				<view class="input-group verification-code-group">
					<input type="text" v-model="code" placeholder="输入验证码" />
					<button @click="sendCode">发送验证码</button>
				</view>
				<input type="text" v-model="newEmail" placeholder="输入新邮箱" />
				<view class="button-group">
					<button @click="updateEmail">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userinfo: null,
				newUsername: '',
				newPhone: '',
				email: '',
				code: '',
				oldEmail: '',
				newEmail: '',
			};
		},
		onShow() {
			this.refreshData();
		},
		onLoad() {
			this.state();
		},
		methods: {
			state() {
				const token = uni.getStorageSync('Authorization');
				if (!token) {
					return;
				}
				const url = 'http://localhost:8887/user/userInfo';
				const header = {
					'Authorization': token,
					'Content-Type': 'application/json',
				};
				uni.request({
					url,
					method: 'GET',
					header,
					success: (res) => {
						if (res.data.code === 200) {
							this.userinfo = res.data.data;
							console.log('1243123:', this.userinfo);
						} else if (res.data.status === 'unauthorized') {
							console.log('1243123:', this.userinfo);
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			formatDateTime(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
			},
			upload() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						const filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'http://localhost:8887/upload',
							filePath: filePath,
							name: 'file',
							success: (uploadRes) => {
								const data = JSON.parse(uploadRes.data);
								if (data.code === 200) {
									this.userinfo.img = data.data; // 更新本地用户信息的头像地址
									this.updateImg(data.data);
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
								}
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			refreshData() {
				this.state();
			},
			updateImg(imgUrl) {
				const token = uni.getStorageSync('Authorization');
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				const url = 'http://localhost:8887/user/updateimg';
				const header = {
					'Authorization': token,
					'Content-Type': 'application/json',
				};
				const user = {
					img: imgUrl,
				};
				uni.request({
					url,
					method: 'POST',
					header,
					data: user,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '头像更新成功',
								icon: 'success'
							});
							// 更新本地用户信息的头像地址
							this.userinfo.img = res.data.data.img;
						} else {
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			Vip() {
				uni.navigateTo({
					url: '/pages/vip/vip'
				});
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			showEditUsername() {
				this.$refs.editUsernamePopup.open();
			},
			hideEditUsername() {
				this.$refs.editUsernamePopup.close();
			},
			showEditPhone() {
				this.$refs.editPhonePopup.open();
			},
			hideEditPhone() {
				this.$refs.editPhonePopup.close();
			},
			showEditEmail() {
				this.$refs.editEmailPopup.open();
			},
			hideEditEmail() {
				this.$refs.editEmailPopup.close();
			},
			sendCode() {
				if (!this.userinfo.email) {
					uni.showToast({
						title: '请先输入邮箱',
						icon: 'none'
					});
					return;
				}
				const url = 'http://localhost:8887/admin/sendCode';
				uni.request({
					url: url,
					method: 'GET',
					data: {
						email: this.userinfo.email,
					},
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '验证码已发送',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					},
					fail: (error) => {
						console.error('发送验证码失败:', error);
						uni.showToast({
							title: '发送验证码失败，请检查网络或联系管理员',
							icon: 'none'
						});
					}
				});
			},
			updateUsername() {
				const url = 'http://localhost:8887/user/updateusername';
				const header = {
					'Authorization': uni.getStorageSync('Authorization'),
					'Content-Type': 'application/json',
				};
				const data = {
					newusername: this.newUsername
				};
				uni.request({
					url,
					method: 'POST',
					header,
					data,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '用户名更新成功',
								icon: 'success'
							});
							this.userinfo.username = this.newUsername;
							this.hideEditUsername();
						} else {
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			updatePhone() {
				const url = 'http://localhost:8887/user/updatephone';
				const header = {
					'Authorization': uni.getStorageSync('Authorization'),
					'Content-Type': 'application/json',
				};
				const data = {
					email: this.userinfo.email,
					code: this.code,
					phone: this.newPhone
				};
				uni.request({
					url,
					method: 'POST',
					header,
					data,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '手机号更新成功',
								icon: 'success'
							});
							this.userinfo.phone = this.newPhone;
							this.hideEditPhone();
						} else {
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			},
			updateEmail() {
				const url = 'http://localhost:8887/user/updatemail';
				const header = {
					'Authorization': uni.getStorageSync('Authorization'),
					'Content-Type': 'application/json',
				};
				const data = {
					email: this.userinfo.email,
					newemail: this.newEmail,
					code: this.code
				};
				uni.request({
					url,
					method: 'POST',
					header,
					data,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: '邮箱更新成功',
								icon: 'success'
							});
							this.userinfo.email = this.newEmail;
							this.hideEditEmail();
						} else {
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.content {
		padding: 20px;
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10px;
		cursor: pointer;
	}

	.avatar-image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.arrow-icon {
		width: 20px;
		height: 20px;
	}

	.user-details {
		background-color: #fff;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		cursor: pointer;
	}

	.detail-key {
		font-weight: bold;
		color: #333;
		flex-grow: 1;
	}

	.detail-value {
		color: #666;
		margin-left: 10px;
	}

	.popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		width: 90%;
		max-width: 500px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.title-x {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		.title {
			font-size: 18px; // 增大字体大小
			font-weight: bold;
			color: #333;
		}

		image {
			width: 24px; // 调整关闭图标大小
			height: 24px;
		}
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		margin-top: 15px;
		position: relative;

		button {
			height: 40px; // 调整按钮高度与输入框一致
			border: 1px solid #007aff; // 按钮边框
			border-radius: 4px; // 按钮圆角
			background-color: #007aff; // 按钮背景颜色
			color: white;
			padding: 0 15px;
			cursor: pointer;
			 vertical-align:middle;
			text-align: center;
			line-height: 40px;
		}

		input {
			flex-grow: 1;
			margin-right: 10px;
			padding: 10px;
			border: none; // 移除边框
			border-bottom: 1px solid #ccc; // 仅显示下边框
			border-radius: 0; // 移除圆角
			&:focus {
				border-bottom: 1px solid #007aff; // 输入框获得焦点时的下边框颜色
			}
		}

		.verification-code-group {
			display: flex;
			align-items: center;

			button {
				border: 1px solid #007aff; // 按钮边框
				border-radius: 4px; // 按钮圆角
				background-color: #007aff; // 按钮背景颜色
				color: white;
				padding: 0 15px;
				height: 42px; // 按钮高度与输入框一致
				cursor: pointer;
			}

			input {
				flex-grow: 1;
				margin-right: 0; // 移除输入框的右边距
				padding: 10px;
				border: none; // 移除边框
				border-bottom: 1px solid #ccc; // 仅显示下边框
				border-radius: 0; // 移除圆角
				&:focus {
					border-bottom: 1px solid #007aff; // 输入框获得焦点时的下边框颜色
				}
			}
		}
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;

		button {
			flex-grow: 1;
			padding: 10px;
			background-color: #007aff;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}
	}

	input {
		border: none; // 移除边框
		border-bottom: 1px solid #ccc; // 仅显示下边框
		padding: 10px;
		border-radius: 4px;
	}

	button{
padding: 10px;
background-color: #007aff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>

